<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
          rel="stylesheet">
    <link href="../../assetsimages/x-icon/agricul.png" rel="shortcut icon" type="image/x-icon">
    <link href="../../assets/css/relys/animate.css" rel="stylesheet">
    <link href="../../assets/css/relys/bootstrap.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/all.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/icofont.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/lightcase.css" rel="stylesheet">
    <link href="../../assets/css/relys/swiper.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/style.css" rel="stylesheet">
    <style type="text/css">
        .img-box {
            width: 100%;
            height: 0;
            padding-top: 100%;
            position: relative;
            overflow: hidden;
        }

        .img-box img {
            width: 100%;
            position: absolute;
            top: 0;
            object-fit: cover;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- Page Header Section Start Here -->
    <section class="page-header bg_img padding-tb">
        <div class="overlay"></div>
        <div class="container">
            <div class="page-header-content-area">
                <h4 class="ph-title">可视化分析</h4>
                <ul class="agri-ul">

                    <li><a class="active">可视化分析</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- Page Header Section Ending Here -->
    <!-- shop page Section Start Here -->
    <div class="shop-page padding-tb">
        <div class="container" style="display: flex">
            <div id="main" style="height: 400px;width: 1000px;margin-top: -100px"></div>
            <div id="main2" style="height: 400px;width: 1000px;margin-top: -100px"></div>
        </div>
        <div class="container" style="display: flex;margin-top: 65px">
            <div id="main3" style="height: 400px;width: 700px;margin-top: -100px"></div>
            <div id="main4" style="height: 400px;width: 700px;margin-top: -100px"></div>
        </div>
        <div class="container" style="display: flex;margin-top: 65px">
            <div id="main5" style="height: 400px;width: 700px;margin-top: -100px"></div>
            <div id="main6" style="height: 400px;width: 700px;margin-top: -100px"></div>
        </div>
        <div class="container" style="display: flex;margin-top: 120px">
            <div id="main7" style="height: 400px;width: 700px;margin-top: -100px"></div>
            <div id="main8" style="height: 400px;width: 700px;margin-top: -100px"></div>
        </div>
    </div>
    <!-- shop page Section ENding Here -->
</div>
<script src="../../assets/js/relys/jquery.js"></script>
<script src="../../assets/js/relys/fontawesome.min.js"></script>
<script src="../../assets/js/relys/bootstrap.min.js"></script>
<script src="../../assets/js/relys/vue.js"></script>
<script src="../../assets/js/api/api.js"></script>
<script src="../../assets/js/api/tplist.js"></script>
<script src="../../assets/js/relys/utils.js"></script>
<script src="../../assets/js/relys/jq-paginator.min.js"></script>
<script src="../../../front/assets/js/relys/echarts.min.js"></script>
<script src="../../../front/assets/js/relys/echarts-wordcloud.min.js"></script>
<div id="script"></div>
</body>
<script type="text/javascript">


    var app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        created() {
            http('/zhaopinxinxi/getData1', 'get', {}, function (res) {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                console.log(126165)
                var option;

                option = {
                    title: {
                        text: '不同企业企业招聘信息数量',
                        align: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: res.key
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.val,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get1', 'get', {}, function (res) {
                var chartDom = document.getElementById('main2');
                var myChart = echarts.init(chartDom);
                var option;
                option = {

                    title: {
                        text: '不同招聘薪资范围',
                        align: 'center',
                        x: '160px',

                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',

                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get2', 'get', {}, function (res) {
                var chartDom = document.getElementById('main3');
                var myChart = echarts.init(chartDom);
                console.log(126165)
                var option;

                option = {
                    title: {
                        text: '不同地区招聘数量',
                        align: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: res.key
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.val,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get3', 'get', {}, function (res) {
                var chartDom = document.getElementById('main4');
                var myChart = echarts.init(chartDom);
                console.log(126165)
                var option;

                option = {
                    title: {
                        text: '不同企业类型数量',
                        align: 'center',
                        x: '160px',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get4', 'get', {}, function (res) {
                var chartDom = document.getElementById('main5');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '不同企业学历需求数量',
                        align: 'center',
                        x: '160px',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get5', 'get', {}, function (res) {
                var chartDom = document.getElementById('main6');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '岗位词云',
                        align: 'center'
                    },
                    series: [{
                        type: 'wordCloud',
                        //maskImage: maskImage,
                        sizeRange: [15, 80],
                        gridSize: 6,
                        shape: 'pentagon',
                        width: '85%',
                        height: '85%',
                        textStyle: {
                            normal: {
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                },
                                fontFamily: 'sans-serif',
                                fontWeight: 'normal'
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: res.data
                    }]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get6', 'get', {}, function (res) {
                var chartDom = document.getElementById('main7');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '不同企业经验要求',
                        align: 'center',
                        x: '160px',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
            http('/zhaopinxinxi/get7', 'get', {}, function (res) {
                var chartDom = document.getElementById('main8');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '不同城市热度',
                        align: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: res.key
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.val,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            })
        },
    })

    function onPageTap(url) {
        window.location.href = url;
    }

    function pageFun() {
        app.getList(false, false)
    }
</script>
</html>
